<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <script src="../js/jq.js"></script>
    <style>
        .box{
            width:90%;
            min-height:300px;
            border:1px solid yellowgreen;
            border-radius: 10px;
            overflow: auto;
            padding:20px;
        }
        /* 高亮的类 class  */
        .router-link-exact-active, .router-link-active{
            padding:4px;
            background: deeppink;
            color:#f50;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <hr>
        <my-head></my-head>

        <!-- 5. 路由出口 显示组件的出口 -->
        <router-view class="box"></router-view>

        <!-- 6.声明式 导航 -->


    </div>

    <template id="myhead">
        <div>
            <h2>header---header</h2>
        </div>
    </template>

    <template id="myapp">
        <div>
            <h2>APP---项目主页</h2>
            <hr>
            <router-view class="box"></router-view>
            <footer>
                <router-link :to="{name:'home'}">主页</router-link>
                <router-link :to="{name:'good'}">商品</router-link>
                <router-link :to="{name:'cart'}">购物车</router-link>
                <router-link :to="{name:'mine'}">我的</router-link>
            </footer>
        </div>
    </template>

    <template id="home">
        <div>
            <h2>Home--主页</h2>
        </div>
    </template>

    <template id="good">
        <div>
            <h2>Good--商品</h2>
        </div>
    </template>

    <template id="cart">
        <div>
            <h2>Cart--购物车</h2>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>Mine--个人中心</h2>
        </div>
    </template>


    <script>
        //组件
        Vue.component('MyHead', {
            template: '#myhead'
        })

        //0 模块化编程  Vue.use(VueRouter)

        //1.定义（路由）组件
        const App={
            template:'#myapp',
        }  
        const NotFound={
            template:'<h2>404--NotFound</h2>',
        }   

        const Home ={
            template:'#home',
            //beforeRouteEnter    进入这个组件之前
            beforeRouteEnter (to, from, next) {
                console.log('beforeRouteEnter');
                next()
            },
            // beforeRouteUpdate   组件数据更新  
            beforeRouteUpdate(to,from,next){
                console.log('beforeRouteUpdate');
                next();
            },
            //beforeRouteLeave    离开这个组件之前 
            beforeRouteLeave (to, from, next) {
                console.log('beforeRouteLeave');
                next(window.confirm('真的要走吗?'));
            }
        }
        const Good ={
            template:'#good',
        }
        const Cart ={
            template:'#cart',
        }
        const Mine ={
            template:'#mine',
        }

        // 2.定义路由匹配规则
        const routes = [
            {
                path:'/',
                redirect:{name:'app'}
            },
            {
                path:'/app',
                name:'app',
                component:App,
                children:[
                    {path:'/home',name:'home',component:Home},
                    {path:'/good',name:'good',component:Good},
                    {
                        path:'/cart',name:'cart',component:Cart,
                        beforeEnter(to, from, next){
                            console.log('beforeEnter');
                            next(window.confirm('请你先确认是否意见登录,再来访问'))
                        }
                    },
                    {path:'/mine',name:'mine',component:Mine},
                ]
            },
            {
                path:'/404',
                name:'404',
                component:NotFound
            },
            {
                path:'*',
                redirect:'/404'
            }
        ]

        // 3.创建路由对象
        //参数
        const router = new VueRouter({
            routes:routes,
        })
        //判断是否可以进入这个路由
        router.beforeEach((to,from,next)=>{
            console.log('全局路由前置守卫');
            console.log(to);
            console.log(from);
            next();
        })
        router.afterEach((to, from) => {
            console.log('全局路由后置守卫');
        })


        const vm = new Vue({
        //4.挂载到根实例
            router, //this.$router 全局变量
        
            data: {
                title: '路由守卫',
            },
            watch:{
                // 监听路由切换 
                '$route':function(to,from){
                    console.log(to)    // 即将进入的路由
                    console.log(from)  // 即将离开的路由  
                }
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title;
                console.log(this.$router )   //  全局路由对象   用于实现路由守卫 路由跳转和路由切换 
                console.log(this.$route  )   //  当前激活的路由对象信息数据  获取路由参数 获取路由信息 
            }
        }).$mount('#app')
    </script>
   <!-- 
        嵌套路由  路由嵌套组件  
        你有多少层嵌套就写多少个 router-view     

        配置简单 路由     

        路由守卫   阻止你进入或者离开当前路由 

        用来判断时候可以进入或者离开当前路由  

        路由导航守卫    分三种   
        a.  全局前置守卫  router.beforeEach(to,from,next)
            全局后置守卫  router.afterEach(to,from)

        b.  路由独享的守卫  beforeEnter(to,from,next)  进入当前路由之前触发 

        c.  路由组件内直接定义以下路由导航守卫  component
            beforeRouteEnter    进入这个组件之前
            beforeRouteUpdate   组件数据更新  
            beforeRouteLeave    离开这个组件之前  
     -->
</body>

</html>